<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2021/1/5
  Time: 3:36 下午
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="GBK">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <title>仿京东网页-欢迎登录</title>
    <link type="text/css" rel="stylesheet" href="//misc.360buyimg.com/user/passport/1.0.0/??/widget/base/base.css,widget/common-2016-1124/common-2016-1124.css,/widget/login-form-2018-0827/login-form-2018-0827.css,/widget/login-banner/login-banner.css,/widget/safe-step/safe-step.css,/widget/foreign-number-layer-170524/foreign-number-layer-170524.css" source="widget">
    <link type="text/css" rel="stylesheet" href="//misc.360buyimg.com/user/passport/1.0.0/css/tinyscrollbar-170524.css">
    <script type="text/javascript" async="" src="//static.360buyimg.com/risk-cdn/seq/s.js?v=6"></script><script type="text/javascript" async="" src="https://wl.jd.com/wl.js"></script><script type="text/javascript" async="" src="//static.360buyimg.com/risk-cdn/seq/s.js?v=6"></script><script type="text/javascript" async="" src="https://cscssl.jd.com/wl.js"></script><script type="text/javascript" src="//misc.360buyimg.com/jdf/lib/jquery-1.6.4.js"></script>
    <script type="text/javascript" src="//misc.360buyimg.com/user/passport/1.0.0/??/js/underscore-min.js"></script>
    <script type="text/javascript" src="//ivs.jd.com/slide/js/jdSlide.1.0.min.js"></script>
    <script type="text/javascript" src="//js-nocaptcha.jd.com/statics/js/main.min.js"></script>
    <script type="text/javascript">
        $(function(){
            window.SysConfig = {
                encryptInfo:  true ,

            };
        });
    </script>
    <title>登录入口</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="/mvc/plugins/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="/mvc/css/common/nav.css">
    <style>
        #login_div{
            /*border:1px solid red;*/

            /*设置外边距*/
            margin-top: 100px;

            /*设置内边距*/
            padding: 20px;

            /*设置边框的阴影部分*/
            box-shadow: 2px 2px 4px #000;

            /*设置边框的圆角*/
            border-radius: 20px;
        }
    </style>
</head>
<body>
    <%--    引入导航--%>
    <%@include file="../common/nav.jsp"%>
    <body style="background: #de6969">
    <!-- SDK 登录 -->
    <div class="w">
        <div id="logo">
            <a <div=""><li><img src="/mvc/imgs/jddl.jpg" id="京东"></li></a></div><a <div="">

        </a>
    </div>
    <div id="content">
        <div class="login-wrap">
            <div class="w">
                <div class="tips-wrapper"><div class="tips-inner"><div class="cont-wrapper">
                </div>
                </div>
                    <div class="login-box" style="display: none;">
                        <div class="mt tab-h">
                        </div>
                        <div class="msg-wrap">
                            <div class="msg-error hide"><b></b></div>
                        </div>
                        <div class="mc">
                            <div class="form">
                            </div>
                        </div>
                    </div>

                    <div class="qrcode-login" style="display: block; visibility: visible;">
                        <div class="mc">
                            <div class="qrcode-error-2016" style="left: 0px; display: block;">
                                <div class="qrcode-error-mask">
                                </div>


                            </div>

                            <div class="qrcode-panel">
                                <ul>


                                </ul>
                            </div>

                        </div>
                    </div>
                    <div class="coagent" id="kbCoagent">
                        <ul>
                            <li>
                                <b></b>

                                <span class="line">|</span>
                            </li>
                            <li>

                            </li>
                            <li class="extra-r">
                                <div>

                                </div>
                            </li>
                        </ul>
                    </div>            </div>
            </div>
            <div class="login-banner" style="background-color: #e93854;">		              <div class="w">			         <div id="banner-bg" clstag="pageclick|keycount|20150112ABD|46" class="i-inner" style="background: url(/mvc/imgs/hong.jpg) 0px 0px no-repeat;background-color: #e93854"></div>		              </div>		           </div>
        </div>
    </div>
    <script type="text/javascript" src="/new/misc/js/login2016.js?v=201702221138"></script>
    <script type="text/javascript" src="//misc.360buyimg.com/user/passport/1.0.0/js/login.index.2020-03-23.js" source="widget" charset="utf-8"></script>
    <script type="text/javascript">	~function () {var data = [{src:"/mvc/imgs/hong.jpg",bgColor:"#e93854",weight: "1"}	,{src:"/mvc/imgs/hong2.jpg",bgColor:"#c50407",weight: "1"}];						   var getRandom = function (arr) {			var _temp = 0, _random = 0, _weight, _newArr = [];						for (var i = 0; i < arr.length; i++) {				_weight = parseInt(arr[i].weight) ? parseInt(arr[i].weight) : 1;				_newArr[i] = [];				_newArr[i].push(_temp);				_temp += _weight;				_newArr[i].push(_temp);			}						_random = Math.ceil(_temp * Math.random());						for (var i = 0; i< _newArr.length; i++){				if(_random > _newArr[i][0] && _random <= _newArr[i][1]){					return arr[i];				}			}			};				var tpl = '<div class="login-banner" style="background-color: {bgColor}">\		              <div class="w">\			         <div id="banner-bg"  clstag="pageclick|keycount|20150112ABD|46" class="i-inner" style="background: url({imgURI}) 0px 0px no-repeat;background-color: {bgColor}"></div>\		              </div>\		           </div>';							var bgData = getRandom(data);		var bannerHtml = tpl.replace(/{bgColor}/g, bgData.bgColor).replace(/{imgURI}/g, bgData.src);				$('.login-banner').replaceWith(bannerHtml);	}();</script>
    <script type="text/javascript" src="//seq.jd.com/jseqf.html?bizId=passport_jd_com_login_pc&amp;platform=js&amp;version=1"></script>


    <%--    登录表单开始--%>
    <div class="container" id="login_div">
        <div class="row">
            <form class="form-horizontal" role="form">
                <fieldset>
                    <legend>用户登录入口</legend>
                    <div class="form-group has-feedback">
                        <label for="email" class="col-sm-2 control-label">邮箱</label>
                        <div class="col-md-8">
                            <input type="text" class="form-control" id="email" placeholder="请输入邮箱">
                            <span class="glyphicon glyphicon-user form-control-feedback"></span>
                            <span class="text-danger" id="error_email" style="display: none">sorry,邮箱不存在!</span>
                        </div>
                    </div>
                    <div class="form-group has-feedback">
                        <label for="code" class="col-sm-2 control-label">验证码</label>
                        <div class="col-md-8">
                            <input type="text" class="form-control" id="code" placeholder="请输入验证码">
                            <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                        </div>
                        <div class="col-md-2">
                           <button type="button" class="btn btn-success" onclick="send_msg()">发送验证码</button>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" id="test">请记住邮箱
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
<%--                            普通按钮--%>
                            <button type="button" id="login_btn" onclick="login()" class="btn btn-default" disabled>登录</button>
                        </div>
                    </div>
                </fieldset>
            </form>
        </div>
    </div>

    <%--    必须先引入jquery.min.js--%>
    <script src="/mvc/plugins/jquery/jquery.min.js"></script>
    <script src="/mvc/plugins/bootstrap/js/bootstrap.js"></script>

    <script>

       $(function(){
           //当整个页面中的所有的dom元素[标签]全部加载完毕之后,自动执行

           //先从本地存储中获取key=email的对应的value
           let email = localStorage.getItem("email");

           //获取email对应的input标签
           let email_input = document.getElementById("email");

           //将本地存储保存的数据放入到email_input文本框中
           email_input.value = email;
       });


       //封装好记住邮箱的功能
       function ck_email(){
           //根据控件的id属性的名称来获取这个控件的对象
           let ck = document.getElementById("test");

           //判断是否记住了邮箱
           if(ck.checked){//选中了...
               //获取email所在的input的对象
               let email_input = document.getElementById("email");
               //获取email控件的值
               let email = email_input.value;
               //将邮箱进行本地存储 - h5本地存储技术
               //以key-value的形式进行存储的,并且key是唯一的
               localStorage.setItem("email",email);
           }else{
               //清除key
               localStorage.removeItem("email");
           }
       }

        function login(){
           //记住邮箱
            ck_email();

            //获取验证码输入框中输入的数据
            //let code = document.getElementById("code").value;

            let code = $("#code").val();

            //获取email所在的input的对象
            let email_input = document.getElementById("email");
            //获取email控件的值
            let email = email_input.value;

            //通过ajax方式将页面上输入的数据发送到后台
            $.post("/mvc/user/logincl",{code:code,email:email},function(result){
                if(result.code==200){
                    //跳转到首页...
                   // console.log(result)

                    window.location="/mvc/product/index";

                }else{
                    //验证码是错误的...
                    alert(result.msg);
                }
            })
        }


        //发送验证码按钮触发的单击事件
        function send_msg(){
           let spans = document.getElementById("error_email");
           spans.style.display="none";

           let emails = document.getElementById("email").value;

           //通过ajax方式将emails发送到后台
            $.post("/mvc/user/sendCode",{email:emails},function(result){
                //result就是json对象
                //json对象.key可以得到它对应的value
                //console.log(result.code);
                if(result.code==200){
                    alert(result.msg);

                    //jquery语法 - 启用禁用按钮
                    $("#login_btn").attr("disabled",false);
                }else{
                    //显示错误信息
                    //先获取错误提示的span对象
                    let span = document.getElementById("error_email");
                    span.style.display="";
                }
            })
        }
    </script>
    <div class="links">
        <p class="text-center">
            <a rel="nofollow" target="_blank">
                关于我们
            </a>
            |
            <a rel="nofollow" target="_blank">
                联系我们
            </a>
            |
            <a rel="nofollow" target="_blank">
                人才招聘
            </a>
            |
            <a rel="nofollow" target="_blank">
                商家入驻
            </a>
            |
            <a rel="nofollow" target="_blank">
                广告服务
            </a>
            |
            <a rel="nofollow" target="_blank">
                手机京东
            </a>
            |
            <a target="_blank">
                友情链接
            </a>
            |
            <a target="_blank">
                销售联盟
            </a>
            |
            <a target="_blank">
                京东社区
            </a>
            |
            <a target="_blank">
                京东公益
            </a>
            |
            <a target="_blank" "="" clstag="pageclick|keycount|20150112ABD|9">English Site</a>
        </p></div>
</body>
</html>
